var addressList = Vue.component('address-list', {
    template: `
    <div class="compontent-address address_border">
    
        <div class="row no-gutter">
            <div class="col-20">
                <div class="title">菜菜帮</div>
                <div class="tag">{{currAddStr | tagStr}}</div>
            </div>
            <div class="col-80" >
                <div class="float-left">
                    <div class="phone">{{currAddStr | phoneStr}}</div>
                    <div class="color-gray address">{{currAddStr | addStr}}</div>
                </div>
                <div class="float-right icons" >
                    <i class="fa fa-chevron-right " @click.prevent="openAddressList" v-show="!address_popup"></i>
                    <i class="fa fa-times" @click.prevent="closeAddressList" v-show="address_popup"></i>
                </div>
                
            </div>
        </div>
            
        
        <div class="address-list" v-show="address_popup">
            <template v-for="v in list">
                <div class="address-item">
                    <label class="label-radio item-content">
                        <input type="radio" :value="v.id" v-model="selected_id">
                        <div class="item-media">
                            <i class="icon icon-form-radio"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title">{{v | addObjStr}}
                            </div>
                            <div>
                                <i @click.prevent="openEdit(v)" class="fa fa-2x fa-pencil-square-o color-blue" aria-hidden="true"></i>
                                &nbsp;
                                <i @click.prevent="del(v.id)" class="fa fa-2x fa-trash color-red" aria-hidden="true"></i>
                            </div>
                        </div>
                    </label>
                </div>
            </template>
            <div class="address-item">
                <div class="item-inner">
                    <div class="item-title">
                        <a href="###" @click.prevent="openAdd">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 
                        添加新地址
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="line"></div>
        </div>
        

        <div class="popup-address" v-show="address_detail_popup">
            <div class="page-content cart order">
                <div class="content-block">
                    <div class="list-block">
                        <div class="row">
                            <div class="col-25">
                                <b>联系人:</b>
                            </div>
                            <div class="col-75">
                                <input type="text" placeholder="请填写收货人的姓名（默认微信昵称）" v-model="receiver" />
                            </div>
                        </div>
                        <!--
                        <div class="row">
                            <div class="col-25">
                                
                            </div>
                            <div class="col-75">
                                <input type="radio" v-model="receiver_sex" value="先生"/> 先生
                                <input type="radio" v-model="receiver_sex" value="女士"/> 女士
                            </div>
                        </div>
                        -->
                        <div class="line"></div>
                        <div class="row">
                            <div class="col-25">
                                <b>手机号码:</b>
                            </div>
                            <div class="col-75">
                                <input type="text" placeholder="请填写收货人手机号码" v-model="mobile" />
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="row">
                            <div class="col-25">
                                <b>收货地址:</b>
                            </div>
                            <div class="col-75">
                                <select v-model="area">
                                    <option value="0">请选择</option>
                                    <template v-for="v in areas">
                                        <option :value="v.id+':'+v.name">{{v.name}}</option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="row">
                            <div class="col-25">
                                <b>详细地址:</b>
                            </div>
                            <div class="col-75">
                                <input type="text" placeholder="楼号/单元/门牌号" v-model="detail" />
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="row">
                            <div class="col-25">
                                <b>选择类型:</b>
                            </div>
                            <div class="col-75">
                                <div class="tag" :class="{selected:tag=='家'}" @click.prevent="tag='家'">家</div>
                                <div class="tag" :class="{selected:tag=='公司'}" @click.prevent="tag='公司'">公司</div>
                                <div class="tag" :class="{selected:tag=='其他'}" @click.prevent="tag='其他'">其他</div>
                            </div>
                        </div>
                        <div class="line" style="height:10px;"></div>
                        <div class="row defAdd">
                            <div class="col-25">
                                <b>默认地址:</b>
                            </div>
                            <div class="col-75 text-right">
                                <input type="checkbox" id="ccb-switch-1" v-model="is_default" >
                                <label for="ccb-switch-1"></label>
                            </div>
                        </div>
                        <div class="line"></div>
                        <button class="bg-orange color-white save-btn" @click.prevent="save()" :disabled="show_lock">
                            保存并使用
                        </button>

                        <!--
                        <ul>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <b>联系人:</b>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <input type="text" placeholder="收货人" v-model="receiver" />
                                </div>
                            </li>
                            <li>
                                <div class="line"></div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <b>手机号码:</b>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <input type="text" placeholder="手机号码" v-model="mobile" />
                                </div>
                            </li>
                            <li>
                                <div class="line"></div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <b>所在区（武汉市）:</b>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <select v-model="area">
                                        <option value="0">请选择</option>
                                        <template v-for="v in areas">
                                            <option :value="v.id+':'+v.name">{{v.name}}</option>
                                        </template>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="line"></div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <b>详细地址:</b>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <input type="text" placeholder="详细地址" v-model="detail" />
                                </div>
                            </li>
                            <li>
                                <div class="line"></div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <b>是否为默认地址:</b>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <label class="color-gray" for="defaultChk">默认地址</label>
                                    <input id="defaultChk" type="checkbox" placeholder="默认地址" v-model="is_default" />
                                </div>
                            </li>
                            <li>
                                <div class="line"></div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <b>标签:</b>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <input type="text" placeholder="标签" v-model="tag" />
                                </div>
                            </li>
                        </ul> -->
                    </div>
                </div>

            </div>
            <!-- Bottom Toolbar-->
            <!--
            <div class="toolbar tabbar tabbar-labels" >
                <div class="toolbar-inner row no-gutter text-center">
                    <button class="col-50 tab-btn bg-orange color-white" @click.prevent="closeDetail">
                        关闭
                    </button>
                    <button class="col-50 tab-btn bg-blue color-white" @click.prevent="save()" :disabled="show_lock">
                        保存
                    </button>
                </div>
            </div>
            -->
        </div>
    </div>
    `,
    props: {
        currAddStr: {
            type: String,
            defautl: ''
        }
    },
    data() {
        return {
            list: [], //地址列表
            areas: [], //区列表
            selected_id: '',
            address_popup: false, //用于修改选择地址
            address_detail_popup: false, //用于控制添加编辑的显示

            //address data
            id: '',
            receiver: '', // 收货人姓名
            receiver_sex: '',
            mobile: '', // 手机号
            email: '', // 邮箱
            province: '420000',
            city: '420100',
            area: '0',
            allow_area: [{
                id: 420102,
                name: "江岸区"
            }, {
                id: 420103,
                name: "江汉区"
            }, {
                id: 420104,
                name: "硚口区"
            }, {
                id: 420105,
                name: "汉阳区"
            }, {
                id: 420106,
                name: "武昌区"
            }, {
                id: 420111,
                name: "洪山区"
            }, {
                id: 0,
                name: "光谷片区"
            }],

            region: [{
                "id": "420000",
                name: "湖北"
            }, {
                "id": "420100",
                name: "武汉"
            }, {
                "id": "0",
                name: ""
            }], // 地区信息
            is_default: false, // 是否默认地址
            detail: '', // 详细地址
            tag: '', // 标签

            show_lock: false
        }
    },
    filters: {
        addObjStr(v) {
            var region = null;
            try {
                region = JSON.parse(v.region);
            } catch (e) {
                return '地址错误';
            }
            return region[1].name + region[2].name + '-' + v.detail;
        },
        addStr(v) {
            var add_obj = null;
            var region = null;
            if (v == '') {
                return '无选择地址'
            }
            try {
                add_obj = JSON.parse(v);
                region = JSON.parse(add_obj.region);
            } catch (e) {
                return '地址错误';
            }
            return region[1].name + region[2].name + '-' + add_obj.detail;
        },
        phoneStr(v) {
            if (!v) return '无';
            var mobile = '';
            try {
                add_obj = JSON.parse(v);
                mobile = add_obj.mobile;
            } catch (e) {
                return '无';
            }
            if (mobile.length != 11) return mobile;
            return mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
        },
        tagStr(v) {
            if (!v) return '无';
            var tag = '';
            try {
                add_obj = JSON.parse(v);
                tag = add_obj.tag;
            } catch (e) {
                return '无';
            }
            return tag;
        }
    },
    methods: {
        init() {
            var self = this;
            self.getList();
            self.initArea(self.region[1].id);
        },
        getList() {
            var self = this;
            ajax.queryUserAddress({
                type: 'post',
                param: {
                    token: localStorage.token
                },
                cb(data) {
                    if (data && data.datalist && data.datalist.length > 0) {
                        self.list = data.datalist.filter(function (v) {
                            return !v.disable;
                        }).map((v) => {
                            // if (v.isDefault == 1) {
                            //     self.id = v.id;
                            //     self.receiver = v.receiver;
                            //     self.mobile = v.mobile;
                            //     self.detail = v.detail;
                            //     self.tag = v.tag;
                            //     self.region[2] = JSON.parse(v.region)[2];
                            //     self.is_default = v.isDefault == 1 ? true : false;
                            // }
                            var obj = {
                                detail: v.detail,
                                disable: v.disable,
                                email: v.email,
                                id: v.id,
                                isDefault: v.isDefault,
                                mobile: v.mobile,
                                receiver: v.receiver,
                                region: v.region,
                                tag: v.tag
                            }
                            if (obj.isDefault == 1) self.selected_id = obj.id;
                            return obj;
                        })

                        // 初始化数据
                    }
                }
            });
        },
        /* initProvince: function () {
            var self = this;
            ajax.queryProvince({
                type: 'post',
                async: false,
                param: {
                    token: localStorage.token
                },
                cb(data) {
                }
            });
        },
        initCity: function (provinceId, cb) {
            var self = this;
            ajax.queryCity({
                type: 'post',
                async: false,
                param: {
                    token: localStorage.token,
                    provinceId: provinceId
                },
                cb(data) {
                }
            });
        }, */
        initArea: function (cityId, cb) {
            var self = this;
            self.areas = self.allow_area;
            // ajax.queryArea({
            //     type: 'post',
            //     async: false,
            //     param: {
            //         token: localStorage.token,
            //         cityId: cityId
            //     },
            //     cb(data) {
            //         self.areas = data.datalist;
            //         if (cb && typeof cb == 'function') cb();
            //     }
            // });
        },
        save() {
            var self = this;
            if (!self.receiver) {
                if (!localStorage.nickname) {
                    tip.info('请填写收货人姓名');
                    return;
                }else{
                    self.receiver = localStorage.nickname;
                }
            }
            if (!self.mobile) {
                tip.info('请填写手机号码');
                return;
            }
            if (self.area == '0') {
                tip.info('请选择地区');
                return;
            }
            if (self.detail.trim() == '') {
                tip.info('请填写详细地址');
                return;
            }
            var area = self.area.split(':');
            self.region[2].id = area[0];
            self.region[2].name = area[1];
            this.show_lock = false;
            ajax.saveUserAddress({
                type: 'post',
                param: {
                    token: localStorage.token,
                    RECEIVER: self.receiver, // 收货人地址
                    REGION: JSON.stringify(self.region),
                    // 地区
                    DETAIL: self.detail,
                    // 详细地址
                    MOBILE: self.mobile, // 手机号
                    EMAIL: self.email, // 邮箱
                    id: self.id, // id 存在则修改，不存在则新增
                    tag: self.tag, // 类型
                    isDefault: self.is_default ? 1 : 0 // 是否默认，1 默认
                },
                cb(data) {
                    tip.info('保存成功');
                    self.getList();
                    self.closeDetail();
                }
            });


        },
        del(id) {
            if (confirm('确定要删除该地址？')) {
                var self = this;
                ajax.delUserAddress({
                    type: 'post',
                    param: {
                        token: localStorage.token,
                        id: id
                    },
                    cb(data) {
                        tip.info('删除成功');
                        self.getList();
                    }
                });
            }
        },
        openAddressList() {
            var self = this;
            self.address_popup = true;
            self.$emit('openaddresslist');
        },
        closeAddressList() {
            var self = this;
            self.address_popup = false;
            self.$emit('closeAddressList');
        },
        clearData() {
            var self = this;
            self.id = '';
            self.receiver = '';
            self.mobile = '';
            self.province = '0';
            self.detail = '';
            self.tag = '家';
            self.is_default = false;
            self.region[2] = {
                id: '',
                name: ''
            }
        },
        openDetail() {
            var self = this;
            self.address_detail_popup = true;
            self.$emit('opendetail');
        },
        closeDetail() {
            var self = this;
            self.clearData();
            self.address_detail_popup = false;
            self.$emit('closedetail');
        },
        openAdd() {
            var self = this;
            self.openDetail();
            self.clearData();
        },
        openEdit(v) {
            var self = this;
            self.id = v.id;
            self.receiver = v.receiver;
            self.mobile = v.mobile;
            self.detail = v.detail;
            self.tag = v.tag;
            self.region[2] = JSON.parse(v.region)[2];
            self.is_default = v.isDefault == 1 ? true : false;
            self.openDetail();
        },
    },
    watch: {
        selected_id(v) {
            var self = this;
            var add_obj = _.find(self.list, function (o) {
                return o.id == v;
            });
            console.log(add_obj);
            self.$emit('addressselchg', add_obj);
        }
    },
    mounted() {
        var self = this;
        self.init();
    }
});